<template>
  <div class="mobile-param-dashboard">
    <!-- 头部统计 -->
    <div class="stats-header">
      <h2 class="page-title">智能参数引擎</h2>
      <div class="stats-grid">
        <div class="stat-item">
          <div class="stat-value">{{ stats.categories }}</div>
          <div class="stat-label">参数分类</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ stats.definitions }}</div>
          <div class="stat-label">参数定义</div>
        </div>
      </div>
    </div>

    <!-- 功能菜单 -->
    <div class="function-menu">
      <h3 class="section-title">功能模块</h3>
      <div class="menu-grid">
        <div class="menu-item" @click="navigateTo('categories')">
          <div class="menu-icon category">
            <el-icon><Folder /></el-icon>
          </div>
          <div class="menu-content">
            <h4 class="menu-title">参数分类</h4>
            <p class="menu-desc">管理参数分类层级</p>
          </div>
          <el-icon class="menu-arrow"><ArrowRight /></el-icon>
        </div>

        <div class="menu-item" @click="navigateTo('definitions')">
          <div class="menu-icon definition">
            <el-icon><Document /></el-icon>
          </div>
          <div class="menu-content">
            <h4 class="menu-title">参数定义</h4>
            <p class="menu-desc">定义参数基本属性</p>
          </div>
          <el-icon class="menu-arrow"><ArrowRight /></el-icon>
        </div>

        <div class="menu-item" @click="navigateTo('values')">
          <div class="menu-icon value">
            <el-icon><Edit /></el-icon>
          </div>
          <div class="menu-content">
            <h4 class="menu-title">参数配置</h4>
            <p class="menu-desc">配置不同环境参数值</p>
          </div>
          <el-icon class="menu-arrow"><ArrowRight /></el-icon>
        </div>
        
        <div class="menu-item" @click="navigateTo('rules')">
          <div class="menu-icon rule">
            <el-icon><Star /></el-icon>
          </div>
          <div class="menu-content">
            <h4 class="menu-title">规则引擎</h4>
            <p class="menu-desc">创建和管理参数规则</p>
          </div>
          <el-icon class="menu-arrow"><ArrowRight /></el-icon>
        </div>

        <div class="menu-item" @click="navigateTo('ai-recommendations')">
          <div class="menu-icon ai">
            <el-icon><Cpu /></el-icon>
          </div>
          <div class="menu-content">
            <h4 class="menu-title">AI推荐</h4>
            <p class="menu-desc">智能分析优化建议</p>
          </div>
          <el-icon class="menu-arrow"><ArrowRight /></el-icon>
        </div>

        <div class="menu-item" @click="navigateTo('monitoring')">
          <div class="menu-icon monitor">
            <el-icon><DataAnalysis /></el-icon>
          </div>
          <div class="menu-content">
            <h4 class="menu-title">系统监控</h4>
            <p class="menu-desc">监控系统运行状态</p>
          </div>
          <el-icon class="menu-arrow"><ArrowRight /></el-icon>
        </div>
      </div>
    </div>

    <!-- 最近操作 -->
    <div class="recent-operations">
      <h3 class="section-title">最近操作</h3>
      <el-card class="operations-card">
        <div class="operation-list">
          <div class="operation-item" v-for="operation in recentOperations" :key="operation.id">
            <div class="operation-icon" :class="operation.type">
              <el-icon><Document /></el-icon>
            </div>
            <div class="operation-content">
              <h4 class="operation-title">{{ operation.title }}</h4>
              <p class="operation-desc">{{ operation.description }}</p>
              <span class="operation-time">{{ operation.time }}</span>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 快速操作按钮 -->
    <div class="quick-actions">
      <el-button type="primary" size="large" @click="quickCreate" class="quick-btn">
        <el-icon><Plus /></el-icon>
        快速创建参数
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Folder, Document, Edit, Star, Cpu, DataAnalysis, ArrowRight, Plus
} from '@element-plus/icons-vue'
import { getParamEngineStats } from '@/assets/api/dashboard'

const router = useRouter()

// 统计数据
const stats = reactive({
  categories: 0,
  definitions: 0,
  rules: 0,
  recommendations: 0
})

// 加载参数引擎数据
const loadParamEngineData = async () => {
  try {
    const data = await getParamEngineStats()
    Object.assign(stats, data)
  } catch (error) {
    console.error('加载参数引擎数据失败:', error)
    // 使用默认数据
    Object.assign(stats, {
      categories: 12,
      definitions: 156,
      rules: 23,
      recommendations: 8
    })
  }
}

// 最近操作数据
const recentOperations = ref([
  {
    id: 1,
    type: 'update',
    title: '更新数据库配置',
    description: '最大连接数参数已更新为200',
    time: '5分钟前'
  },
  {
    id: 2,
    type: 'create',
    title: '创建新规则',
    description: '为缓存TTL创建了校验规则',
    time: '1小时前'
  },
  {
    id: 3,
    type: 'ai',
    title: 'AI推荐应用',
    description: '应用了AI推荐的性能优化参数',
    time: '3小时前'
  }
])

// 导航到指定功能
const navigateTo = (module) => {
  router.push(`/param-engine/${module}`)
}

// 快速创建
const quickCreate = () => {
  router.push('/param-engine/definitions')
}


// 组件挂载时加载数据
onMounted(() => {
  loadParamEngineData()
})
</script>

<style scoped>
.mobile-param-dashboard {
  padding: 16px;
  padding-bottom: 100px;
  position: relative;
}

/* 头部统计 */
.stats-header {
  margin-bottom: 24px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #262626;
  margin: 0 0 20px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.stat-item {
  background: white;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #1890ff;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 13px;
  color: #8c8c8c;
}

/* 功能菜单 */
.function-menu {
  margin-bottom: 24px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #262626;
  margin: 0 0 16px 0;
}

.menu-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.menu-item {
  background: white;
  padding: 16px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
}

.menu-item:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.menu-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  font-size: 20px;
  color: white;
}

.menu-icon.category {
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
}

.menu-icon.definition {
  background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
}

.menu-icon.value {
  background: linear-gradient(135deg, #fa8c16 0%, #d48806 100%);
}

.menu-icon.rule {
  background: linear-gradient(135deg, #722ed1 0%, #531dab 100%);
}

.menu-icon.ai {
  background: linear-gradient(135deg, #eb2f96 0%, #c41d7f 100%);
}

.menu-icon.monitor {
  background: linear-gradient(135deg, #13c2c2 0%, #08979c 100%);
}

.menu-content {
  flex: 1;
}

.menu-title {
  font-size: 16px;
  font-weight: 600;
  color: #262626;
  margin: 0 0 4px 0;
}

.menu-desc {
  font-size: 13px;
  color: #8c8c8c;
  margin: 0;
}

.menu-arrow {
  font-size: 16px;
  color: #bfbfbf;
}

/* 最近操作 */
.recent-operations {
  margin-bottom: 24px;
}

.operations-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.operation-list {
  padding: 16px;
}

.operation-item {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.operation-item:last-child {
  border-bottom: none;
}

.operation-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  font-size: 16px;
  flex-shrink: 0;
}

.operation-icon.update {
  background: #fff7e6;
  color: #fa8c16;
}

.operation-icon.create {
  background: #f6ffed;
  color: #52c41a;
}

.operation-icon.ai {
  background: #f9f0ff;
  color: #722ed1;
}

.operation-content {
  flex: 1;
}

.operation-title {
  font-size: 14px;
  font-weight: 600;
  color: #262626;
  margin: 0 0 4px 0;
}

.operation-desc {
  font-size: 13px;
  color: #8c8c8c;
  margin: 0 0 4px 0;
  line-height: 1.4;
}

.operation-time {
  font-size: 12px;
  color: #bfbfbf;
}

/* 快速操作 */
.quick-actions {
  margin-bottom: 24px;
}

.quick-btn {
  width: 100%;
  height: 48px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
}

</style>


